{extend name='iview/base'/}

{block name="style"}
<style>
    .ivu-menu-light.ivu-menu-horizontal
    .ivu-menu-item-active, .ivu-menu-light.ivu-menu-horizontal
    .ivu-menu-item:hover, .ivu-menu-light.ivu-menu-horizontal
    .ivu-menu-submenu-active, .ivu-menu-light.ivu-menu-horizontal .ivu-menu-submenu:hover {
        border-top: 2px solid #2d8cf0;
        border-bottom: 0;
    }
</style>
{/block}

{block name="style"}
<style>
    .ivu-menu-light.ivu-menu-horizontal .ivu-menu-item-active,
    .ivu-menu-light.ivu-menu-horizontal .ivu-menu-item:hover,
    .ivu-menu-light.ivu-menu-horizontal .ivu-menu-submenu-active,
    .ivu-menu-light.ivu-menu-horizontal .ivu-menu-submenu:hover {
        border-top: 2px solid #2d8cf0;
        border-bottom: 0;
    }
</style>
{/block}
{block name="main"}
<div>
    <i-menu ref="menu" theme="light" @on-open-change="onOpenChange" mode="horizontal" :active-name="1">
        <menu-item name="1">
            内容管理
        </menu-item>
        <menu-item name="2">
            用户管理
        </menu-item>
        <Submenu name="3">
            <template slot="title">
                统计分析
            </template>
            <MenuGroup title="使用">
                <menu-item name="3-1">新增和启动</menu-item>
                <menu-item name="3-2">活跃分析</menu-item>
                <menu-item name="3-3">时段分析</menu-item>
            </MenuGroup>
            <MenuGroup title="留存">
                <menu-item name="3-4">用户留存</menu-item>
                <menu-item name="3-5">流失用户</menu-item>
            </MenuGroup>
        </Submenu>
        <menu-item name="4">
            综合设置
        </menu-item>
    </i-menu>
</div>
{/block}
{block name="vue"}
<script>
  vue = new Vue({
    el: '#app',
    data: {
      activeKey: '2'
    },
    methods: {
      onSelect(name) {
        console.log(name)
      },
      onOpenChange(name) {
        console.log(name)
      }
    }
  })
</script>
{/block}